<template>
  <el-table :data="list" v-loading="loading" style="width: 100%">
    <!--  -->
    <el-table-column label="日期" width="180">
      <!-- 作用域插槽 -->
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>

    <el-table-column label="姓名" width="180">
      <template slot-scope="scope">
        <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- scope.$index  (下标) -->
        <!-- scope.row  (每一项的内容) -->
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >

        <!-- 气泡确认框  里面的内容需要添加slot-->
        <el-popconfirm @cancel="cancel" @confirm="confirm(scope.$index)" title="确定删除吗？">
          <!-- @click="handleDelete(scope.$index, scope.row)" -->
          <el-button size="mini" slot="reference" type="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
// 加载中的进度条
// import NproGress from "nprogress";

export default {
  //  回调函数   promise   *   async
  //   async created() {
  //     console.log(this.init)
  //     await this.init()
  //     this.loading = false
  //   },
  created() {
    // 开启加载中
    // NproGress.start();
    this.init();
    // 关闭
    // NproGress.done()
  },
  computed: {
    ...mapState("crud", ["list", "loading"]),
  },
  methods: {
    ...mapActions("crud", ["init"]),
    ...mapMutations("crud", ["REM_LIST_ITEM"]),

    // 删除 取消
    cancel() {
      this.$message("取消删除");
    },

    // 确定  删除
    confirm(index) {
      // 执行vuex中的删除
      this.REM_LIST_ITEM({ index })
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style>
</style>